<template>
	<view class="member-manage-container">
		<!-- 顶部导航栏 -->
		<public-module leftIcon="arrow-left" title="成员管理" @leftClick="goBack"></public-module>

		<!-- 成员列表 -->
		<mescroll-uni :height="`${height}px`" :down="downOption" :up="upOption" @init="mescrollInit"
			@down="downCallback" @up="upCallback">
			<view class="member-list">
				<view class="member-item" v-for="(member, index) in memberList" :key="member.id">
					<view class="member-info">
						<text class="member-index">{{index + 1}}.</text>
						<view class="member-detail">
							<text class="member-name">{{member.nickName || '未知用户'}}</text>
							<text class="member-role">{{member.userId === currentUser.userId ? '组长' : '成员'}}</text>
						</view>
					</view>
					<view class="member-actions" v-if="member.userId !== currentUser.userId">
						<u-button type="error" size="medium" @click="showRemoveConfirm(member)">移除</u-button>
					</view>
				</view>
			</view>
		</mescroll-uni>

		<!-- 移除确认区域 -->
		<view class="remove-confirm" v-if="showRemoveModal">
			<view class="confirm-content">
				<text class="confirm-text">确定要移除成员 {{removeMember ? removeMember.nickName : ''}} 吗？</text>
				<view class="confirm-buttons">
					<u-button type="default" size="medium" @click="showRemoveModal = false">取消</u-button>
					<u-button type="error" size="medium" @click="confirmRemove">确定</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		groupMemberList,
		groupMemberDelete
	} from "@/config/api.js";

	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				height: 0,
				groupId: '',
				memberList: [],
				removeMember: null,
				showRemoveModal: false,
				currentUser: uni.getStorageSync('user') || {}, // 添加当前用户信息
				downOption: {
					use: true
				},
				memberForm: {
					userId: '',
					groupId: ''
				},
				upOption: {
					textNoMore: '没有更多了~',
					toTop: {
						right: '24rpx',
						bottom: '60rpx'
					}
				}
			};
		},
		onLoad(options) {
			this.groupId = options.groupId;
			const res = uni.getWindowInfo();
			this.height = res.windowHeight - 44; // 44为导航栏高度
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			showRemoveConfirm(member) {
				this.removeMember = member;
				this.showRemoveModal = true;
			},
			async confirmRemove() {
				try {
					this.memberForm.userId = this.removeMember.userId;
					this.memberForm.groupId = this.removeMember.groupId;
					const res = await groupMemberDelete(this.memberForm);
					if(res.code == 200){
						uni.showToast({
							title: '移除成功',
							icon: 'success'
						});
						// 关闭移除确认区域
						this.showRemoveModal = false;
						// 刷新列表
						this.mescroll.resetUpScroll();
					}
				} catch (error) {
					uni.showToast({
						title: '移除失败',
						icon: 'none'
					});
				}
			},

			// 上拉加载回调
			async upCallback(page) {
				try {
					const params = `?pageNum=${page.num}&pageSize=${page.size}&groupId=${this.groupId}`;
					const res = await groupMemberList(params);
					
					if (res && res.rows) {
						this.total = res.total;
						this.mescroll.endBySize(res.rows?.length || 0, res.total);
						if (page.num == 1) this.memberList = [];
						this.memberList = this.memberList.concat(res.rows);
					}

				} catch (error) {
					console.error('获取成员列表失败:', error);
					this.mescroll.endErr();
					uni.showToast({
						title: '获取成员列表失败',
						icon: 'none'
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.member-manage-container {
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.member-list {
		padding: 20rpx;
	}

	.member-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
	}

	.member-info {
		display: flex;
		align-items: center;
	}

	.member-index {
		font-size: 28rpx;
		color: #666;
		margin-right: 20rpx;
		min-width: 40rpx;
		text-align: center;
	}

	.member-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.member-detail {
		display: flex;
		flex-direction: column;
	}

	.member-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
	}

	.member-role {
		font-size: 24rpx;
		color: #999;
	}

	.no-data {
		padding: 100rpx 0;
	}

	.remove-confirm {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.confirm-content {
		background-color: #fff;
		padding: 40rpx;
		border-radius: 16rpx;
		width: 80%;
	}

	.confirm-text {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 40rpx;
		display: block;
		text-align: center;
	}

	.confirm-buttons {
		display: flex;
		justify-content: space-between;
	}
</style>